<div class="row" id="deploymenInfo">
    <div class="col-xs-12">
        <div class="box">
            <div class="box-header">
                <h3 class="box-title">流程上传布署</h3>
                <div class="box-tools">
                </div>
            </div>
            <!-- /.box-header -->
            <div class="box-body table-responsive form-inline">
                <div class="form-group">
                    <label class="sr-only" for="name">名称</label>
                    <input type="text" name="processFilename" class="form-control" id="proc-def-name" placeholder="请输入流程名称">
                </div>
                <div class="form-group">
                    <label class="sr-only" for="inputfile">文件输入</label>
                    <input type="file" name="processFile" id="proc-inputfile">
                </div>
                <button type="button" class="btn btn-default" id="processUpload">提交</button>
                <!-- /.box-body -->
            </div>
            <!-- /.box -->
        </div>
        <div class="box">
            <div class="box-header">
                <h3 class="box-title">部署信息管理列表</h3>
            </div>
            <!-- /.box-header -->
            <div class="box-body table-responsive no-padding">
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>流程名称</th>
                            <th>发布时间</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody id="proc-deploy-tbody">
                        <tr>
                            <td colspan="7">数据正在加载中...</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <!-- /.box-body -->
        </div>
        <div class="box">
            <div class="box-header">
                <h3 class="box-title">流程定义信息列表</h3>
            </div>
            <!-- /.box-header -->
            <div class="box-body table-responsive no-padding">
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>名称</th>
                            <th>流程定义的KEY</th>
                            <th>流程定义的版本</th>
                            <th>流程定义的规则文件名称</th>
                            <th>流程定义的规则图片名称</th>
                            <th>部署ID</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody id="proc-define-tbody">
                        <tr>
                            <td colspan="7">数据正在加载中...</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <!-- /.box-body -->
        </div>
    </div>
</div>
<script type="text/javascript">
$(function() {

    $("#processUpload").on('click', processDefineSubmitNow);

    // $("#proc-deploy-tbody").load("/procDef/deploymenList", function(result) {
    //     doGetObjects();
    // });
    $("#proc-deploy-tbody").on('click', '.deleteDeploymentByid', deleteDeploymentById);

    $.getJSON("/procDef/deploymenList", function(json, textStatus) {
        doHandleResponseResult(json);
    });

});


function deleteDeploymentById() {
    console.log("触发删除");
    var url = "/procDef/deleteDeploymentById";
    $.getJSON(url, { id: $(this).val() }, function(result) {
        if (result.state == 1) {
            $("#mainContentId").load("proc/process_list");
        } else {
            alert(result.message);
        }
    });
}

//提交form--MultiPartFile-数据时, 由jquery来操作, 这样不跳转页面,还支持alert
function processDefineSubmitNow() {
    var formData = new FormData();
    formData.append("processFile", $("#proc-inputfile")[0].files[0]);
    formData.append("processFilename", $("#proc-def-name").val());
    //console.log(formData.getAll("processFile"))
    $.ajax({
        url: "/procDef/newDeploy",
        type: 'POST',
        data: formData,
        processData: false,
        contentType: false,
        success: function(result) {
            if (result.state == 1) {
                $("#mainContentId").load("proc/process_list");
            } else {
                alert(result.message);
            }
        }
    });
}

function doHandleResponseResult(result) {
    if (result.state == 1) {
        //console.log("second", result)
        console.log(result);
        doSetTableBodyRows1(result.data.depList);
        doSetTableBodyRows2(result.data.pdList);
    } else {
        //console.log(result);
        emptyTable($("#proc-deploy-tbody"), result);
        emptyTable($("#proc-define-tbody"), result);
    }
}

function emptyTable(tableId, result) {
    tableId.empty();
    var tr = $("<tr><td colspan='7'>" + result.message + "</td></tr>");
    tableId.append(tr);
}



function doSetTableBodyRows1(records) {
    //console.log("thried", records)
    var tBody = $("#proc-deploy-tbody");
    tBody.empty();
    for (var i = 0; i < records.length; i++) {
        //2.1构建tr 对象
        var tr = $("<tr></tr>");
        //2.2构建tds 对象
        var tds = doCreateDeployTds1(records[i]);
        //2.3 tds追加到tr
        tr.append(tds);
        //2.4 tr追加到tBody
        tBody.append(tr);
    }
}

function doCreateDeployTds1(record) {
    var tds =
        "<td>" + record.id + "</td>" +
        "<td>" + record.name + "</td>" +
        "<td>" + record.deploymentTime + "</td>" +
        "<td>" + "<button type='button' class='deleteDeploymentByid' value='" + record.id + "''>删除</button></td>"


    ;
    return tds;
}

function doSetTableBodyRows2(records) {
    //console.log("thried", records)
    var tBody = $("#proc-define-tbody");
    tBody.empty();
    for (var i = 0; i < records.length; i++) {
        //2.1构建tr 对象
        var tr = $("<tr></tr>");
        //2.2构建tds 对象
        var tds = doCreateDeployTds2(records[i]);
        //2.3 tds追加到tr
        tr.append(tds);
        //2.4 tr追加到tBody
        tBody.append(tr);
    }
}

function doCreateDeployTds2(record) {
    var tds =
        "<td>" + record.id + "</td>" +
        "<td>" + record.name + "</td>" +
        "<td>" + record.key + "</td>" +
        "<td>" + record.version + "</td>" +
        "<td>" + record.resourceName + "</td>" +
        "<td>" + record.diagramResourceName + "</td>" +
        "<td>" + record.deploymentId + "</td>" +
        "<td>" + "<a target='_blank' href='/procDef/findProcessImage?"+
        "deploymentId="+record.deploymentId+"&imageName="+record.diagramResourceName+"'>查看流程图</a>" + "</td>" ;
    return tds;
}
</script>